<template>
	<view class="left clearfix bai">
		<uni-popup ref="popup" type="center" @maskClick="closePopup()">
			<view class="login-box left clearfix relative">
				<view class="login-close absolute" @click="closePopup()">
					<uni-icons type="closeempty" color="#fff" size="18"></uni-icons>
				</view>
				<view class="login-title left clearfix">
					新增专辑
				</view>
				
				<view class="add-input-box left">
					<input placeholder="请输入专辑名" v-model="title"/>
				</view>
				<view class="login-errMssage left clearfix" v-if="errMessage">
					<uni-icons type="icon-cuowu10" size="15" color="red" custom-prefix="iconfont"></uni-icons> {{errMessage}}
				</view>
				<view class="login-errMssage left clearfix" v-else>
					
				</view>
				<view class="add-submit left" @click="submitForm()">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style scoped>
	.login-errMssage{width:100%;height:30px;line-heght:30px;text-align: center;color:red;margin-top:20px;font-size:14px;}
	.add-submit{width:60%;height:45px;line-height:45px;border-radius: 22.5px;background:#2979ff;color:#fff;text-align: center;margin-left:20%;margin-top:70px;cursor:pointer;}
	.add-input-box input{width:calc(100% - 10px);padding-left:10px;height:50px;line-height:50px;}
	.add-input-box{width:80%;margin-left:10%;margin-top:100px;border:1px solid #ccc;height:50px;line-height:50px;border-radius: 5px;}
	.login-title{width:100%;height:30px;font-size:20px;font-weight:500;text-align: center;margin-top:20px;color:#151b26;}
	.login-close{width:35px;height:35px;line-height:35px;text-align:center;border-radius: 50%;background:rgba(21, 27, 38, .2);top:5px;right:10px;cursor: pointer;}
	.login-box{width:600px;height:420px;background:#fff;border-radius: 12px;}
</style>

<script>
	var db = uniCloud.database();
	export default {
		name:"add-popup",
		data() {
			return {
				title:'',
				errMessage:''
			};
		},
		props:{
			show:{
				type:Boolean,
				default:true
			},
			userinfo:{
				type:Object,
				default:null
			}
		},
		watch:{
			"show"(val){
				if(val == false){
					this.$refs.popup.close();
				}else{
					this.$refs.popup.open();
				}
			}
		},
		methods:{
			//点击确定以后
			submitForm(){
				var that = this;
				var title = this.title;
				var userinfo = this.userinfo;
				if(!title){
					this.errMessage = '请输入专辑名';
					return false;
				}else{
					this.errMessage = '';
				}
				
				if(!userinfo || !userinfo._id){
					this.errMessage = '用户未登录';
					return false;
				}else{
					this.errMessage = '';
				}
				
				uni.showLoading({
					title:'保存中'
				})
				var data = {
					uid:userinfo._id,
					title:title,
					chapter_number:0,
					sort:0,
					is_publish:false,
					type:'title',
					create_date:new Date().getTime()
				}
				db.collection('timbre_title').add(data).then(res=>{
					data._id = res.result.id;
					uni.hideLoading()
					uni.showToast({
						title:'添加成功',
						icon:'none',
						duration:2000
					})
					that.closePopup();
					that.$emit('confirm',data);
					that.title = '';
					
				}).catch(err=>{
					uni.hideLoading()
				});
			},
			//关闭弹窗
			closePopup(){
				this.$refs.popup.close();
				this.$emit('close',false);
			}
		}
	}
</script>
